<template>
  <div class="audit-count">
    <div class="count-top">
      <h2>剩余未审核发布项</h2>
      <div class="count-rotate">{{ num }}</div>
    </div>
    <div class="count-content">
      <div class="count-chart">
        <h2>各应用近30天审核数</h2>
        <div class="chart-content" id="count-recent"></div>
      </div>
      <div class="count-chart" v-loading="loading">
        <h2>
          发布达人榜
          <span class="count-handler">
            <el-radio-group v-model="hotType">
              <el-radio label="week">周</el-radio>
              <el-radio label="month">月</el-radio>
              <el-radio label="all">年</el-radio>
            </el-radio-group>
          </span>
        </h2>
        <div class="chart-content">
          <ul class="tag-scrollbar">
            <li v-for="(item, index) in hotList" :key="item.userId">
              <div class="hot-top" v-if="index === 0">
                <div class="top-item">
                  <div class="top-tips">
                    <span><icon-svg name="iconDiamond"></icon-svg>NO. 1</span>
                  </div>
                  <div class="top-name">{{ $name(item, 'nname', 'userNm') }}</div>
                  <div class="top-num">
                    <span>{{ item.releaseNum }}</span
                    >项分享发布项
                  </div>
                </div>
                <div class="top-item top-avatar"><img :src="$img(item.fileId)" /></div>
              </div>
              <div class="hot-name" v-else>
                <icon-svg
                  name="iconDiamond"
                  v-if="index <= 2"
                  class="user-panel-icon"
                  :class="index === 0 ? 'first' : index === 1 ? 'second' : 'third'"
                ></icon-svg>
                {{ $name(item, 'nname', 'userNm') }}
              </div>
              <div class="hot" v-if="index > 0">{{ item.releaseNum }}项</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      loading: false,
      num: '',
      hotType: '',
      hotList: [],
      barChart: null
    }
  },
  mounted() {
    this.$nextTick(() => this.init())
  },
  watch: {
    hotType() {
      this.getHotList()
    }
  },
  methods: {
    init() {
      this.getNum()
      this.getMonthInfo()
      this.hotType = 'week'
    },
    getNum() {
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagAuditCenter/getReviewNumber'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.num = data.data
        } else {
          // 失败后执行的操作
        }
      })
    },
    getMonthInfo() {
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagAuditCenter/getMonthReviewNumber'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.initChart(data.data)
        } else {
          // 失败后执行的操作
        }
      })
    },
    getHotList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`tag/tagAuditCenter/getReleaseTalent/${this.hotType}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.hotList = data.data
        } else {
          // 失败后执行的操作
        }
        this.loading = false
      })
    },
    initChart(data) {
      this.barChart = echarts.init(document.getElementById('count-recent'))
      let option = {
        grid: {
          top: '20',
          left: 0,
          right: '20',
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#000'
          },
          data: ['标签分析', '标签运算', '客群画像']
        },
        series: [
          {
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'right',
              fontWeight: 'bold',
              color: '#5db4fe'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#3e7dda' },
                { offset: 1, color: '#5db4fe' }
              ]),
              borderRadius: 15
            },
            data: [data.funnelAnalysis, data.derTagCalculation, data.astTagDerived]
          }
        ]
      }
      this.barChart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.barChart.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.audit-count {
  width: 400px;
  height: 100%;
  float: left;
  background-color: #f4f4f4;
  .count-top {
    height: 200px;
    padding: 20px;
    color: #fff;
    background: url(~@/assets/img/audit_count_bg.jpg) no-repeat 0px 0px / 100% 100%;
    position: relative;
  }
  .count-rotate {
    font-size: 30px;
    font-weight: bolder;
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    margin: -60px 0 0 -75px;
    background: url(~@/assets/img/audit_count_rotate.png) no-repeat 0px 0px / 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: countRotate infinite 3s linear;
  }
  @keyframes countRotate {
    0% {
      transform: translateY(0deg);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0deg);
    }
  }
  .count-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 200px);
    padding: 20px 15px;
  }
  .count-chart {
    height: calc(50% - 10px);
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    h2 {
      padding: 0 10px;
      color: $theme-color;
    }
    .count-handler {
      float: right;
      .el-radio {
        margin-right: 15px;
      }
    }
    .chart-content {
      height: calc(100% - 30px);
      margin-top: 10px;
      ul {
        height: 100%;
        overflow-y: auto;
      }
      li {
        font-weight: bold;
        display: flex;
        height: calc(100% / 5);
        padding: calc(100% / 5 / 2 - 18px) 10px 0 10px;
        border-bottom: 1px solid #eee;
        &:first-of-type {
          height: auto;
          padding-bottom: 10px;
          border-top: 1px solid #eee;
        }
      }
      .hot-top {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .top-item {
          flex: 1;
        }
        .top-avatar img {
          width: 100%;
        }
        .top-tips {
          margin-bottom: 10px;
          span {
            display: inline-block;
            padding: 5px 10px;
            color: #fff;
            background-color: #e26c60;
            border-radius: 3px;
            svg {
              margin-right: 10px;
            }
          }
        }
        .top-name {
          font-size: 30px;
          font-weight: bolder;
          margin-bottom: 15px;
        }
        .top-num {
          color: #e26c60;
          span {
            font-size: 30px;
          }
        }
      }
      .hot-name {
        flex: 1;
        padding-left: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        svg {
          position: absolute;
          left: 0;
          top: 2px;
          &.second {
            color: #f2bb54;
          }
          &.third {
            color: #90bde4;
          }
        }
      }
      .hot {
        width: 60px;
        text-align: right;
        color: $theme-color;
      }
    }
  }
}
</style>
